<template>

  <main>
    <aside>
      <div class="indb">
        <h3>声纹入库</h3>
        <input type="hidden" v-model="voiceprint.url">
        <div class="form-group">
          <!-- <label for="audio">音频: </label> -->
          <input type="file" id="audio" accept="audio/wav, audio/mp3" multiple>
        </div>
        <div>
          <button class="btn btn-default" v-on:click="saveRow">入库</button>
        </div>
      </div>

      <div class="com1v1">
        <h3>1v1比对</h3>
        <div class="form-group">
          <!-- <label for="audio1">音频1: </label> -->
          <input type="file" id="audio1">
        </div>
        <div class="form-group">
          <!-- <label for="audio2">音频2: </label> -->
          <input type="file" id="audio2" accept="audio/wav, audio/mp3">
        </div>
        <div class="form-group">
          <label for="sim" v-if="sim">相似度: </label>
          <p>{{ sim }}</p>
        </div>
        <div>
          <button class="btn btn-default" v-on:click="compare_1v1">1v1比对</button>
        </div>
      </div>

      <div class="com1vn">
        <h3>1vN检索</h3>
        <div class="form-group">
          <!-- <label for="audio3">音频: </label> -->
          <input type="file" id="audio3" accept="audio/wav, audio/mp3">
        </div>
        <div class="form-group">
          <label for="compare_1vN_sim" v-if="compare_1vN_sim">相似度: </label>
          <p>{{ compare_1vN_sim }}</p>
          <label for="compare_1vN_name" v-if="compare_1vN_name">相似用户: </label>
          <p>{{ compare_1vN_name }}</p>
        </div>
        <div>
          <button class="btn btn-default" v-on:click="compare_1vN">1vN检索</button>
        </div>
      </div>

    </aside>

    <article>
      <div class="vpdb">
        <h3>声纹底库</h3>
        <table class="table table-hover">
          <thead>
            <tr>
              <th>用户</th>
              <th>音频</th>
              <th>翻译内容</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in voiceprint_list" :key="item.url">
              <td>{{ item.user }}</td>
              <td>
                <audio controls>
                  <!-- <source src="horse.ogg" type="audio/ogg"> -->
                  <source :src="item.audio" type="audio/mpeg">
                </audio>
              </td>
              <td>{{ item.content }}</td>
              <td>
                <button @click="deleteRow(item)" :data-idx="idx" class="btn btn-danger" style="margin: 0% 10%;">
                  <i class="glyphicon glyphicon-remove"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </article>
  </main>

</template>

<script>
import { ref } from 'vue';
import axios from 'axios'
import { onMounted, reactive, toRefs } from 'vue'

export default {
  setup() {
    let base_url = "http://10.82.14.162:8000/voiceprint/"
    const voiceprint_blank = { url: '', user: '', audio: '', content: '', voiceprint: '', }
    const state = reactive({
      voiceprint_list: [],
      voiceprint: Object.assign({}, voiceprint_blank),
      sim: undefined,
      compare_1vN_sim: undefined,
      compare_1vN_name: undefined,
    })

    const getVoiceprintList = () => {
      axios.get(base_url).then(res => {
        state.voiceprint_list = res.data;
        state.voiceprint = Object.assign({}, voiceprint_blank)
      }).catch(err => {
        console.log(err);
      })
    }

    const saveRow = () => {
      var data = new FormData();
      data.append("method", "post_db")
      let files = document.getElementById('audio').files
      Array.from(files).forEach(item => {
        console.log('item: ', item)
        data.append('audio', item)
      })
      console.log("axios: ", data)

      const headers = Object.assign(({}), {})
      headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

      axios.post(base_url, data, { headers: headers }).then(resp => {
        console.log("success: ", resp)
        getVoiceprintList();
      }).catch(error => {
        console.log(error)
      })
    }

    const compare_1vN = () => {
      var data = new FormData();
      data.append("method", "compare_1vN")
      let files = document.getElementById('audio3').files
      Array.from(files).forEach(item => {
        console.log('item: ', item)
        data.append('audio', item)
      })
      console.log("axios: ", data)

      const headers = Object.assign(({}), {})
      headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

      axios.post(base_url, data, { headers: headers }).then(resp => {
        state.compare_1vN_name = resp.data.user
        state.compare_1vN_sim = resp.data.sim
        console.log("success: ", resp)
      }).catch(error => {
        console.log(error)
      })
    }

    const compare_1v1 = () => {
      var data = new FormData();
      let files1 = document.getElementById('audio1').files
      Array.from(files1).forEach(item => {
        console.log('item: ', item)
        data.append('audio1', item)
      })
      let files2 = document.getElementById('audio2').files
      Array.from(files2).forEach(item => {
        console.log('item: ', item)
        data.append('audio2', item)
      })
      data.append("method", "compare_1v1")

      const headers = Object.assign(({}), {})
      headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

      axios.post(base_url, data, { headers: headers }).then(resp => {
        state.sim = resp.data.sim
        console.log("success: ", resp)
      }).catch(error => {
        console.log(error)
      })
    }

    const deleteRow = (item) => {
      axios.delete(item.url).then(() => {
        getVoiceprintList();
      }).catch(err => {
        console.log(err);
      })
    }

    onMounted(() => {
      getVoiceprintList();
    })
    return {
      ...toRefs(state),
      saveRow,
      compare_1vN,
      compare_1v1,
      deleteRow,
    }
  },

}
</script>

<style>
@import '../less/VoiceprintDB.css'
</style>

